<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>数据仪表盘</title>
<!--	<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>-->
<!--	<script src="https://cdn.tailwindcss.com"></script>-->
<!--	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">-->

	<script src="../templates/h5/assets/jquery.min.js"></script>
	<script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>
	<link href="../templates/h5/assets/fontawesome6.4.0/css/all.css
" rel="stylesheet">


	<script>
		tailwind.config = {
			theme: {
				extend: {
					colors: {
						primary: '#e53935', // 红色主题，匹配设计图风格
						secondary: '#f5f5f5',
					},
					fontFamily: {
						sans: ['Inter', 'system-ui', 'sans-serif'],
					},
				},
			}
		}
	</script>
	<style type="text/tailwindcss">
		@layer utilities {
			.card-shadow {
				box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
			}
			.rank-number {
				@apply w-6 h-6 flex items-center justify-center rounded-full text-white font-bold;
			}
			.rank-number-red {
				@apply bg-red-600;
			}
			.rank-number-gray {
				@apply bg-gray-300 text-gray-700;
			}
		}
	</style>
</head>
<body class="bg-gray-50 font-sans">
<!-- 顶部导航栏 -->
<header class="bg-white shadow-md">
	<div class="container mx-auto px-4 py-3 flex justify-between items-center">
		<h1 class="text-xl font-bold">数据仪表盘</h1>
		<button onclick="workSetting()" class="bg-secondary text-red-900 py-3 rounded font-medium text-sm">
			&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;参赛设置管理&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
		</button>
		<div class="flex items-center">
			<span class="mr-2">管理员</span>
			<span class="text-sm text-gray-600">admin</span>
			<div class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center ml-2">
				<i class="fas fa-user"></i>
			</div>
		</div>
	</div>
</header>

<main class="container mx-auto px-4 py-6">
	<!-- 数据统计卡片（空容器，jQuery 动态填充） -->
	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-8" id="stats-cards"></div>

	<!-- 排行榜区域 -->
	<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
		<!-- 综合得分TOP10 -->
		<div class="bg-white rounded-lg card-shadow p-5">
			<div class="flex items-center mb-4">
				<i class="fas fa-trophy text-primary mr-2"></i>
				<h2 class="font-bold text-lg">综合得分TOP10</h2>
			</div>
			<ul id="comprehensive-rank"></ul>
		</div>

		<!-- 学生评分TOP10 -->
		<div class="bg-white rounded-lg card-shadow p-5">
			<div class="flex items-center mb-4">
				<i class="fas fa-graduation-cap text-primary mr-2"></i>
				<h2 class="font-bold text-lg">学生评分TOP10</h2>
			</div>
			<ul id="student-rank"></ul>
		</div>

		<!-- 教师评分TOP10 -->
		<div class="bg-white rounded-lg card-shadow p-5">
			<div class="flex items-center mb-4">
				<i class="fas fa-chalkboard-teacher text-primary mr-2"></i>
				<h2 class="font-bold text-lg">教师评分TOP10</h2>
			</div>
			<ul id="teacher-rank"></ul>
		</div>
	</div>
</main>

<script>
	// 1. 全局配置：接口前缀（替换为实际后端地址）

	// 2. 页面加载完成后执行（jQuery 入口函数）
	$(function() {
		loadStats(); // 加载统计数据
		loadComprehensiveRank(); // 加载综合得分排名
		loadStudentRank(); // 加载学生评分排名
		loadTeacherRank(); // 加载教师评分排名
	});

	/**
	 * 3. 加载统计数据（总参赛选手、总用户等）
	 */
	function loadStats() {
		$.ajax({
			url: `/home/stats`, // 接口地址
			type: "GET", // 请求方式
			dataType: "json", // 响应数据类型
			success: function(data) {
				console.log(JSON.stringify(data))
				// 拼接统计卡片HTML
				let statsHtml = `
					<div class="bg-white rounded-lg p-6 card-shadow">
						<p class="text-gray-600 text-sm mb-1">总参赛选手</p>
						<p class="text-3xl font-bold text-primary">${data.totalContestants}</p>
					</div>
					<div class="bg-white rounded-lg p-6 card-shadow">
						<p class="text-gray-600 text-sm mb-1">总用户数</p>
						<p class="text-3xl font-bold text-primary">${data.totalUsers}</p>
					</div>
					<div class="bg-white rounded-lg p-6 card-shadow">
						<p class="text-gray-600 text-sm mb-1">总点赞量</p>
						<p class="text-3xl font-bold text-primary">${data.totalLikes}</p>
					</div>
					<div class="bg-white rounded-lg p-6 card-shadow">
						<p class="text-gray-600 text-sm mb-1">总浏览量</p>
						<p class="text-3xl font-bold text-primary">${data.totalViews}</p>
					</div>
				`;
				// 渲染到页面容器
				$("#stats-cards").html(statsHtml);
			},
			error: function(xhr, status, error) {
				console.error("统计数据加载失败：", error);
			}
		});
	}

	/**
	 * 4. 加载综合得分TOP10
	 */
	function loadComprehensiveRank() {
		$.getJSON(`/home/rank/comprehensive`, function(data) {
			let rankHtml = "";
			// 遍历排名数据拼接HTML
			$.each(data, function(index, item) {
				// 前3名用红色排名框，其余用灰色
				const rankClass = item.rank <= 3 ? "rank-number-red" : "rank-number-gray";
				rankHtml += `
					<li class="flex items-center py-3 border-b border-gray-100">
						<span class="rank-number ${rankClass} mr-3">${item.rank}</span>
						<span>${item.title}</span>
						<span class="ml-auto text-primary font-bold">${item.score}</span>
					</li>
				`;
			});
			// 渲染到排行榜容器
			$("#comprehensive-rank").html(rankHtml);
		}).fail(function(error) {
			console.error("综合得分排名加载失败：", error);
		});
	}

	/**
	 * 5. 加载学生评分TOP10
	 */
	function loadStudentRank() {
		$.getJSON(`/home/rank/student`, function(data) {
			let rankHtml = "";
			$.each(data, function(index, item) {
				const rankClass = item.rank <= 3 ? "rank-number-red" : "rank-number-gray";
				rankHtml += `
					<li class="flex items-center py-3 border-b border-gray-100">
						<span class="rank-number ${rankClass} mr-3">${item.rank}</span>
						<span>${item.title}</span>
						<span class="ml-auto text-primary font-bold">${item.score}</span>
					</li>
				`;
			});
			$("#student-rank").html(rankHtml);
		}).fail(function(error) {
			console.error("学生评分排名加载失败：", error);
		});
	}

	/**
	 * 6. 加载教师评分TOP10
	 */
	function loadTeacherRank() {
		$.getJSON(`/home/rank/teacher`, function(data) {
			let rankHtml = "";
			$.each(data, function(index, item) {
				const rankClass = item.rank <= 3 ? "rank-number-red" : "rank-number-gray";
				rankHtml += `
					<li class="flex items-center py-3 border-b border-gray-100">
						<span class="rank-number ${rankClass} mr-3">${item.rank}</span>
						<span>${item.title}</span>
						<span class="ml-auto text-primary font-bold">${item.score}</span>
					</li>
				`;
			});
			$("#teacher-rank").html(rankHtml);
		}).fail(function(error) {
			console.error("教师评分排名加载失败：", error);
		});
	}


</script>

<th:block th:include="include :: footer" />
<th:block th:include="include :: datetimepicker-js" />
<script th:inline="javascript">
	var prefix = ctx + "comp/setting";
	$(function() {
		var options = {
			url: prefix + "/list",
			updateUrl: prefix + "/edit/{id}",
			modalName: "参赛设置",
			columns: [{
				checkbox: true
			}]
		};
		$.table.init(options);
	});

	function workSetting() {
		$.operate.edit(1);
	}




</script>
</body>
</html>